<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		        * {
		            margin: 0;
		            padding: 0;
		        }
		
		        .wallpaper {
		            width: 800px;
		            margin: 50px auto;
		        }
		
		        .dragTextBox {
		            position: absolute;
		            background: #d6e5ff;
		            padding: 2px 6px;
		            border-radius: 5px;
		            display: none;
		            left: -50px;
		            top: -300px;
		        }
		
		        .input {
		            width: 100%;
		            height: 40px;
		        }
		    </style>
	</head>
	<body>
		<div class="wallpaper">
		        <div class="model-input" id="variable">
		            <input name="" autocomplete="off" class="input">
		        </div>
		
		        <ul class="list" id="consult">
		            <li> Convert HL7 to XML</li>
		            <li>Convert XML to HL7</li>
		            <li>Convert X12 to XML</li>
		            <li>Convert XML to X12</li>
		            <li>Convert EDI to XML</li>
		            <li>Convert XML to EDI</li>
		            <li>Convert NCPDP to XML</li>
		            <li>Convert XML to NCPDP</li>
		        </ul>
		    </div>
		
		    <div class='dragTextBox' id='dragTextBox'></div>

	</body>
	<script>
		class zjDragEvent {
		        constructor(id, input) {
		            this.ul = document.querySelector(id);
		            this.input = document.querySelector(input).children[0];
		            this.falg=false;
		            this.init();
		        }
		        init() {
		            var _this = this;
		            var dragBox = document.querySelector("#dragTextBox");
		
		            this.ul.addEventListener('mousedown', function (e) {
		               _this.flag=true;
		                e.preventDefault();
		                var target = e.target || e.srcElement;
		                dragBox.innerHTML = target.innerHTML;
		                dragBox.style.display = "block";
		
		
		            })
		            document.addEventListener('mousemove', function (e) {
		 if(_this.flag){
		                var e = e || window.event;
		                var left = event.clientX;
		                var top = event.clientY;
		
		                dragBox.style.left = left + "px";
		                dragBox.style.top = top + "px";
		
		}
		            })
		            this.input.addEventListener('mouseover', function () {
		                dragBox.style.backgroundColor = "#cffbe5";
		            })
		            this.input.addEventListener('mouseout', function () {
		                dragBox.style.backgroundColor = "#d6e5ff"
		            })
		            this.input.addEventListener('mouseup', function () {
		                var text = dragBox.innerHTML;
		                if (text == "") return false;
		                var value = this.value;
		
		                if (value.indexOf(text) == -1) {
		                    this.value = value + text + "；";
		                }
		
		            })
		
		            document.addEventListener('mouseup', function () {
		_this.flag=false;
		                dragBox.innerHTML = "";
		                dragBox.style.display = "none";
		            })
		
		        }
		
		    }
		    var dragone = new zjDragEvent("#consult", "#variable");

	</script>
</html>
